<template>
  <div class="play_box">
    <headerTitle>{{ msg }}</headerTitle>
    <!-- 进度条 组件 -->
    <section class="progress">
      <van-steps :active="active">
        <van-step>全部订单</van-step>
        <van-step>待付款</van-step>
        <van-step>待发货</van-step>
        <van-step>待收货</van-step>
        <van-step>订单完成</van-step>
      </van-steps>
    </section>
    <!-- 状态 -->
    <section class="state_box">
      <button v-show="active == 0">全部订单</button>
      <button v-show="active == 1">待付款</button>
      <button v-show="active == 2">待发货</button>
      <button v-show="active == 3">待收货</button>
      <button v-show="active == 4">订单完成</button>
    </section>
    <section class="goodsLists">
      <van-swipe-cell v-for="(item, index) in goodsListFun" :key="index">
        <van-card
          class="goods-card"
          :num="item.num"
          :title="item.name"
          :price="(item.price * item.num).toFixed(2)"
          :desc="item.subname"
          :thumb="item.image_url"
        />
        <div class="state">
          <span v-show="item.state == 0" @click="changeState(id,index)"
            >支付</span
          >
          <span v-show="item.state == 1">已支付</span>
          <span v-show="item.state == 1" @click="changeState(item.id)"
            >发货</span
          >
          <span v-show="item.state == 2" @click="changeState(item.id)"
            >收货</span
          >
          <span v-show="item.state >= 3">订单已完成</span>
          <span v-show="item.state == 3">评价</span>
        </div>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="del(index)"
          />
        </template>
      </van-swipe-cell>
    </section>

    <section class="nav">
      <van-popover
        v-model="showPopover"
        trigger="click"
        theme="dark"
        :actions="actions"
        @select="onSelect"
        placement="right-start"
      >
        <template #reference>
          <!-- <van-button type="primary">浅色风格</van-button> -->
          <div class="contro">
            <i class="iconfont icon-gouwuche"></i>
          </div>
        </template>
      </van-popover>
    </section>
  </div>
</template>

<script>
import headerTitle from "../components/base/headerTitle.vue";
import { Toast } from "vant";
export default {
  props: ["payList"],
  components: {
    headerTitle,
  },
  data() {
    return {
      msg: "我的订单",
      active: 1,
      goodsList: [],
      showPopover: false,
      state: 0,
      actions: [
        { text: "全部订单" },
        { text: "待付款" },
        { text: "待发货" },
        { text: "待收货" },
        { text: "订单完成" },
      ],
    };
  },
  created() {
    this.getGoodsListFun();
    this.active = this.$route.query.active;
  },
  methods: {
    // changeState(id) {
    //   let index = this.goodsList.findIndex((item) => {
    //     return item.id == id;
    //   });
    //   this.goodsList[index].state += 1;
    //   this.$emit("changeState", id);
    // },
    changeState(id,index) {
      // let index = this.goodsList.findIndex((item) => {
      //   return item.id == id;
      // });
      console.log(index);
      this.goodsList[index].state += 1;
      this.$emit("changeState", id);
    },
    onSelect(action, index) {
      Toast(action.text + index);
      switch (index) {
        case 0:
          this.active = 0;
          break;
        case 1:
          this.active = 1;
          break;
        case 2:
          this.active = 2;
          break;
        case 3:
          this.active = 3;
          break;
        default:
          this.active = 4;
          break;
      }
    },
    // state 状态
    // 0：待付款
    // 1：已付款
    // 2：待发货
    // 3：待收货
    // 4：完成订单
    // goodsListFun() {
    //   if (this.active == 1) {
    //     return this.goodsList.filter((item) => {
    //       return item.state == 0;
    //     });
    //   } else if (this.active == 2) {
    //     return this.goodsList.filter((item) => {
    //       return item.state == 1;
    //     });
    //   } else if (this.active == 3) {
    //     return this.goodsList.filter((item) => {
    //       return item.state == 2;
    //     });
    //   } else if (this.active == 4) {
    //     return this.goodsList.filter((item) => {
    //       return item.state == 3;
    //     });
    //   } else {
    //     return this.goodsList;
    //   }
    // },
    del(index) {
      console.log(111);
      this.goodsList.splice(index, 1);
      this.$emit("delFun", index);
    },
    getGoodsListFun() {
      let arr = require("../../public/jSON/good");
      // console.log(arr);
      if (this.payList) {
        for (let i = 0; i < this.payList.length; i++) {
          for (let j = 0; j < arr.length; j++) {
            if (this.payList[i].id == arr[j].id) {
              arr[j].num = this.payList[i].num;
              arr[j].state = this.payList[i].state;
              this.goodsList.push(arr[j]);
            }
          }
        }
      }
    },
  },
  computed: {
    goodsListFun: function () {
      if (this.active == 1) {
        return this.goodsList.filter((item) => {
          return item.state == 0;
        });
      } else if (this.active == 2) {
        return this.goodsList.filter((item) => {
          return item.state == 1;
        });
      } else if (this.active == 3) {
        return this.goodsList.filter((item) => {
          return item.state == 2;
        });
      } else if (this.active == 4) {
        return this.goodsList.filter((item) => {
          return item.state == 3;
        });
      } else {
        return this.goodsList;
      }
    },
  },

};
</script>

<style lang="less" scoped>
.play_box {
  .state_box {
    padding: 10px;
    button {
      outline: none;
      border: none;
      background-color: transparent;
      color: #969799;
      font-weight: bold;
    }
  }
  .progress {
    margin-top: 2px;
  }
  .goodsLists {
    padding-top: 3px;
    .van-swipe-cell {
      margin-bottom: 2px;
      .van-swipe-cell__wrapper {
        .state {
          position: absolute;
          font-size: 12px;
          right: 50px;
          bottom: 8px;
          color: rgba(136, 136, 136, 0.3);
          span {
            border: 1px solid rgba(136, 136, 136, 0.3);
            padding: 0px 2px;
            margin-left: 2px;
          }
        }
        .goods-card {
          margin: 0;
          background-color: white;
          border-radius: 10px 0 0 10px;
          margin-left: 10px;
          .van-card__header {
            .van-card__thumb {
              width: 75px;
              height: 75px;
              margin-right: 10px;
            }
            .van-card__content {
              min-height: 75px;

              .van-card__bottom {
                .van-card__price {
                  div {
                    color: red;
                  }
                }
              }
            }
          }
        }

        .van-swipe-cell__right {
          overflow: hidden;
          .delete-button {
            height: 100%;
            border-radius: 0 10px 10px 0px !important;
            overflow: hidden;
          }
        }
      }
    }
  }
  .nav {
    position: fixed;
    top: 200px;
    left: 0px;
    opacity: 0.5;
    // &:hover {
    //   left: 0px;
    // }
    .van-popover__wrapper {
      width: 40px;
      height: 40px;
      font-size: 20px;
      .contro {
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 40px;
        border: 1px solid rgba(255, 0, 0, 0.473);
        border-radius: 5px;
        i {
          font-size: 20px;
          color: rgba(136, 136, 136, 0.7);
        }
      }
    }
  }
}
.van-step--horizontal .van-step__title {
  margin-left: 0 !important;
}
.van-step--horizontal,
.van-step__title {
  margin-left: 0 !important;
}
</style>